<template>
	<view class="d-flex border-top border-light-secondary" style="height: 100%; box-sizing: border-box;">
		<loading :show="loadingShow"></loading>
		<scroll-view id="left-scroll-view" scroll-y="true" style="flex: 1;height: 100%;"
			class="border-right border-light-secondary" :scroll-top="leftScrollTop">
			<view class="border-bottom border-light-secondary py-1 left-scroll-item" v-for="(item,index) in cate"
				:key="index" @tap="classLeftCliHandle(index)">
				<view class="py-1 font-md text-muted text-center" :class="activeIndex === index?'class-active':''">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" style="flex: 3.5;height: 100%;" :scroll-top="rightScrollTop"
			:scroll-with-animation="true" @scroll="rightScrollChange">
			<view class="row right-scroll-item" v-for="(item,index) in list" :key="index">
				<view class="span24-8 text-center py-2" v-for="(item1,index1) in item.list" :key="index1">
					<image :src="item1.src" style="width: 120upx;height: 120upx;"></image>
					<text class="d-block">{{item1.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingShow:false,
				activeIndex: 0,
				cate: [],
				list: [],
				leftDomsTop: [], // 存放左侧每一个分类距离顶部的距离
				rightDomsTop: [], // 存放右侧每一个分类距离顶部的距离
				rightScrollTop: 0,
				leftScrollTop: 0,
				cateItemHeight: 0, // 记录每个分类的高度
			}
		},
		onLoad() {
			this.getData()
		},
		async onReady() {
			this.getElInfo({
				size: true,
				rect: true,
				all: 'left'
			}).then(data => {
				this.leftDomsTop = data.map(item => {
					this.cateItemHeight = item.height
					return item.top
				})
			})
			this.getElInfo({
				all: 'right',
				size: false,
				rect: true
			}).then(data => {
				this.rightDomsTop = data.map(item => item.top)
			})

		},
		watch: {
			// 滚动右侧时监听左侧列表的activeIndex值，每次activeIndex值改变时去判断当前的选项值的高度是否需要进行滚动
			activeIndex(newValue, oldValue) {
				this.getElInfo({
					size: true,
					rect: false,
					scrollOffset: true
				}).then(data => {
					let H = data.height // 左侧列表高度
					let ST = data.scrollTop // 左侧scroll滚动的高度
					// 下面
					// 当前item自身高度+当前item距离顶部的高度>左侧高度+左侧滚动高度  时证明当前模块处于最底部
					if (this.leftDomsTop[newValue] + this.cateItemHeight > (H + ST)) {
						return this.leftScrollTop = this.leftDomsTop[newValue] + this.cateItemHeight - H
					}
					// 上边
					if (ST > this.cateItemHeight) {
						this.leftScrollTop = this.leftDomsTop[newValue]
					}
				})

			}
		},
		methods: {
			getElInfo(obj = {}) {
				return new Promise((res, rej) => {
					let option = {
						size: obj.size ? true : false,
						rect: obj.rect ? true : false,
						scrollOffset: obj.scrollOffset ? true : false,
					}
					const query = uni.createSelectorQuery().in(this);
					let q = obj.all ? query.selectAll(`.${obj.all}-scroll-item`) : query.select(
						'#left-scroll-view')
					q.fields(option, data => {
						res(data)
					}).exec();
				})
			},
			getData() {
				this.loadingShow = true
				for (let i = 0; i < 20; i++) {
					this.cate.push({
						name: '分类' + i
					})
					this.list.push({
						list: []
					})
				}
				for (let i = 0; i < this.list.length; i++) {
					for (let j = 0; j < 24; j++) {
						this.list[i].list.push({
							src: '/static/images/demo/demo10.jpg',
							name: `分类${i}-商品${j}`
						})
					}
				}
				this.$nextTick(() => {
					this.loadingShow = false
				})
			},
			classLeftCliHandle(index) {
				this.activeIndex = index
				// 点击左侧分类 右侧商品进行滚动
				this.rightScrollTop = this.rightDomsTop[index]
			},
			// 右侧scroll滚动change事件
			rightScrollChange(e) {
				let currentTop = e.detail.scrollTop // 当前右侧距离顶部
				// 实现右侧滚动 左侧分类进行联动效果
				this.rightDomsTop.forEach((item, index) => {
					if (item < currentTop) {
						this.activeIndex = index
						return false
					}
				})
			}
		}
	}
</script>

<style>
	.class-active {
		border-left: 8upx solid #FD6801;
		color: #FD6801 !important;
	}
</style>